<template>
  <div class="container">
    <div class="title">
      <div class="status">商品管理</div>
      <div class="inquire">
        <div>?</div>
        <div class="help">帮助和服务</div>
        <div>&lt;&lt;</div>
      </div>
    </div>
    <div class="box">
      <div class="remind" v-if="display">
        <span class="ml">!</span>
        <span>经营提醒：3月23日起，自营商品发布需要审核通过方可上架，建议商家提前准备。<span class="look_details">查看详情</span></span>
        <span class="close" @click="close">×</span>
      </div>
      <el-button class="buttom" @click="go">发布商品</el-button>
      <div class="choose">
        <ul class="choose_ul">
          <li class="item">
            <el-form class="form">
              <div class="text">订单查询:</div>
              <el-form-item class="item_form">
                <el-input class="input" placeholder="请输入商品名称" />
              </el-form-item>
              <div class="text ml">订单查询:</div>
              <el-form-item class="item_form">
                <el-select placeholder="订单编号">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
              <div class="text ml">订单查询:</div>
              <el-form-item class="item_form">
                <el-select placeholder="订单编号">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
            </el-form>
          </li>
          <li class="item">
            <el-form class="form">
              <div class="text">销量:</div>
              <el-form-item class="item_form">
                <el-input class="input_small" />
                <span>——</span>
                <el-input class="input_small" />
              </el-form-item>
              <div class="text ml">价格(元):</div>
              <el-form-item class="item_form">
                <el-input class="input_small" />
                <span>——</span>
                <el-input class="input_small" />
              </el-form-item>
            </el-form>
          </li>
          <li class="item">
            <el-form class="form">
              <div class="text">库存减扣方式:</div>
              <el-form-item class="item_form">
                <el-select placeholder="订单编号">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
            </el-form>
          </li>
        </ul>
        <div class="box_bottom">
          <el-button class="btn c">筛选</el-button>
          <el-button class="btn">导出</el-button>
          <span>查看已导出列表</span>
          <span>重置筛选条件</span>
        </div>
      </div>
      <div class="order_box">
        <div class="order_details">
          <ul class="title_box">
            <li class="details_title">全部</li>
            <li class="details_title">销售中</li>
            <li class="details_title">已售罄</li>
            <li class="details_title">仓库中</li>
          </ul>
          <div style="border: 0.5px solid #eee;" />
          <ul class="options">
            <li class="options_all">
              <el-checkbox v-model="checked">全选</el-checkbox>
            </li>
            <li class="options_btn">下架</li>
            <li class="options_btn">删除</li>
            <li class="options_btn">该分组</li>
            <li class="options_btn">会员价</li>
            <li class="options_btn">批量操作</li>
          </ul>
          <ul class="order_title_box">
            <li class="order_details_title">
              <div class="pl">
                <el-checkbox v-model="checked">商品</el-checkbox>
              </div>
              <div>单价(元)</div>
            </li>
            <li class="order_details_title">访问量</li>
            <li class="order_details_title">库存</li>
            <li class="order_details_title">销量</li>
            <li class="order_details_title">序号</li>
            <li class="order_details_title">创建时间</li>
            <li class="order_details_title">商品状态</li>
            <li class="order_details_title">操作</li>
          </ul>
          <div style="border: 0.5px solid #eee;" />
          <div class="goods_box">
            <ul v-for="item of 5" class="order">
              <li class="order_item">
                <div class="order_item_l">
                  <el-checkbox v-model="checked" class="lab" />
                  <div class="order_img" />
                  <span>测试商品四</span>
                </div>
                <div class="order_item_r">
                  <div>1.00</div>
                </div>
              </li>
              <li class="order_item">
                <div>访客量：0</div>
                <div>浏览量：0</div>
              </li>
              <li class="order_item">100</li>
              <li class="order_item">-</li>
              <li class="order_item">0</li>
              <li class="order_item">
                <div>20-20-00</div>
                <div>20:20:12</div>
              </li>
              <li class="order_item">销售中</li>
              <li class="order_item">
                <span>编辑</span>
                <span>会员价</span>
                <span>推广</span>
                <span>复制</span>
              </li>
            </ul>
          </div>
          <div style="border: 0.5px solid #eee;" />
          <div class="pagination">
            <el-pagination
              background="#eee"
              :current-page="currentPage4"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      display: true,
      checked: true,
      // 分页
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4
    }
  },
  methods: {
    close() {
      this.display = !this.display
    },
    go() {
      this.$router.push({path: '/guide/index?ID=lll'})
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>
